<template>
  <div class="container contract-review">
    <p class="bread">
      <a href="#/personalcenter">个人中心</a> >
      <a href="#/personalcenter/transac" class="font-s-18">订单管理</a> >
      <a href="javascript:void(0);" class="font-s-16">交易监控</a>
    </p>
    <div class="bg-c-fff box-border">
      <h3 class="tm-title">交易监控服务</h3>
      <step :stepData="stepData" :stepNum="stepNum" @stepRouter="stepRouter"></step>
    </div>
    <form action="" class="content">
      <div class="bg-c-fff box-border box">
        <p class="tc title">
          交易监控申请单
        </p>
        <ul class="fix box-border-top monitor-num">
          <li class="flo-left tc">监控方</li>
          <li class="flo-right fix">
            <ul>
              <li>
                <input type="radio" name="num" id="one" value="1" v-model="picked" :disabled="typeShow" />
                <label for="one">单方监控</label>
              </li>
              <li>
                <input type="radio" name="num" id="two" value="2" v-model="picked" :disabled="typeShow" />
                <label for="two">双方监控</label>
              </li>
              <li>
                <input type="radio" name="num" id="three" value="3" v-model="picked" :disabled="typeShow" />
                <label for="three">多方监控</label>
              </li>
            </ul>
          </li>
        </ul>
        <ul class="fix box-border-top monitor-box">
          <li class="flo-left tc">申请监控方名称</li>
          <li class="flo-right fix" v-if="businessName">
            <input type="text" class="input-css" v-model="businessName" readonly="readonly">
            <i class="iconfont icon-asterisk"></i>
          </li>
          <li class="flo-right fix" v-else>
            <input type="text" class="input-css" v-model="account" readonly="readonly">
            <i class="iconfont icon-asterisk"></i>
          </li>
        </ul>
        <ul class="fix box-border-top monitor-box">
          <li class="flo-left tc">交易相对方名称</li>
          <li class="flo-right fix">
            <input type="text" placeholder="若有多个请用；隔开" class="input-css" v-model="otherBusiness" :readonly="typeShow">
            <i class="iconfont icon-asterisk"></i>
          </li>
        </ul>
        <ul class="fix box-border-top monitor-box">
          <li class="flo-left tc">合同类型</li>
          <li class="flo-right fix">
            <select class="input-css" v-model="contractType" :readonly="typeShow">
              <option value="">预置合同类型</option>
              <option value="机械设备买卖">机械设备买卖</option>
              <option value="备品备件买卖">备品备件买卖</option>
              <option value="工矿货物买卖">工矿货物买卖</option>
              <option value="原材料买卖">原材料买卖</option>
              <option value="建筑装饰材料买卖">建筑装饰材料买卖</option>
              <option value="办公用品买卖">办公用品买卖</option>
              <option value="电子产品买卖">电子产品买卖</option>
              <option value="食品买卖">食品买卖</option>
              <option value="日化用品买卖">日化用品买卖</option>
              <option value="服装买卖">服装买卖</option>
              <option value="车辆买卖">车辆买卖</option>
              <option value="酒品茶叶买卖">酒品茶叶买卖</option>
              <option value="医药产品买卖">医药产品买卖</option>
              <option value="农产品买卖">农产品买卖</option>
              <option value="农资产品买卖">农资产品买卖</option>
              <option value="加工承揽交易">加工承揽交易</option>
              <option value="图书出版物买卖">图书出版物买卖</option>
              <option value="广告服务交易">广告服务交易</option>
              <option value="运输交易">运输交易</option>
              <option value="借贷交易">借贷交易</option>
            </select>
          </li>
        </ul>
        <ul class="fix box-border-top monitor-box">
          <li class="flo-left tc">合同金额</li>
          <li class="flo-right fix">
            <input type="number" placeholder="请输入数字" class="input-css" v-model.number="money" :readonly="typeShow">
            <i class="iconfont icon-asterisk"></i>
            <span>万元</span>
          </li>
        </ul>
        <ul class="fix box-border-top monitor-box monitor-contact">
          <li class="flo-left tc">本次监控联系人</li>
          <li class="flo-right fix">
            <input type="text" placeholder="请输入姓名" class="input-css" v-model="contactsName" :readonly="typeShow">
            <i class="iconfont icon-asterisk"></i>
            <input type="number" placeholder="请输入手机号码" class="input-css" v-model.number="phoneNum" :readonly="typeShow">
            <i class="iconfont icon-asterisk"></i>
          </li>
        </ul>
      </div>
      <div v-if="this.status<=1">
        <div class="box bg-c-fff box-border auto tc" v-if="submit">
          <input type="button" value="提交" class="blue-button" v-on:click="onBindClick">
          <input type="button" value="取消" class="white-button" v-on:click="onCancel">
        </div>
        <div class="box bg-c-fff box-border auto tc" v-if="this.id !== this.otherId && !submit" v-cloak>
          <input type="button" value="拒绝交易" class="white-button" v-on:click="refusal">
          <input type="button" value="确认接受" class="blue-button" @click="accept">
        </div>
      </div>
    </form>
    <vodal class="vodal-main" :show="ts1Show" animation="zoom" :width="420" :height="300" @hide="ts1Show=false">
      <div>
        <h4>确认接受交易监控申请单</h4>
        <div class="con">交易监控方全部确认后可进入交易监控阶段，并分别扣除1次交易监控次数。确认接受吗？</div>
      </div>
      <div class="tc auto vodal-btn-box">
        <button class="blue-button" @click="onSubmit">确认</button>
        <button class="white-button" @click="ts1Show=false">取消</button>
      </div>
    </vodal>
    <vodal class="vodal-main vodal-main-s" :show="ts2Show" animation="zoom" :width="420" :height="332" @hide="ts2Show=false">
      <div>
        <h4>确认接受交易监控申请单</h4>
        <div class="con">
          <p>请输入交易相对方账号，我们将发送通知给对方，对方全部确认后可进入交易监控阶段，并扣除1次交易监控次数。</p>
          <p><span>对方账号：</span>
            <input type="text" class="input-css" v-model="accountNumber">
          </p>
        </div>
      </div>
      <div class="tc auto vodal-btn-box">
        <button class="blue-button" @click="onSubmission">确认</button>
        <button class="white-button" @click="ts2Show=false">取消</button>
      </div>
    </vodal>
    <vodal class="vodal-main" :show="ts3Show" animation="zoom" :width="420" :height="300" @hide="ts3Show=false">
      <div>
        <h4>拒绝交易</h4>
        <div class="con">若您拒绝交易，该交易监控订单不成立，确认拒绝交易吗</div>
      </div>
      <div class="tc auto vodal-btn-box">
        <button class="blue-button" @click="onRefuse">确认</button>
        <button class="white-button" @click="ts3Show=false">取消</button>
      </div>
    </vodal>
    <vodal class="vodal-main vodal-main-s" :show="ts4Show" animation="zoom" :width="420" :height="332" @hide="ts4Show=false">
      <div>
        <h4>接受交易</h4>
        <div class="con">
          <p>若您确认接受交易，待交易监控方全部确认后可同时进入交易监控阶段，并分别扣除1次交易监控次数。确认接受交易吗？</p>
        </div>
      </div>
      <div class="tc auto vodal-btn-box">
        <a href="javascript:void(0);">
          <button class="blue-button" @click="onConfirm">确认</button>
        </a>
        <button class="white-button" @click="ts4Show=false">取消</button>
      </div>
    </vodal>
  </div>
</template>
<script type="text/javascript">
import Step from '../components/Step'
export default {
  components: {
    Step
  },
  data() {
    return {
      contractType: '',
      stepNum: 0,
      stepData: [{
        name: '提交服务申请'
      }, {
        name: '确认资质报告'
      }, {
        name: '合同审查'
      }, {
        name: '绘制流程图'
      }, {
        name: '交易监控'
      }, {
        name: '服务评价'
      }],
      businessName: '',
      account: '',
      id: '',
      otherId: '',
      otherBusiness: '',
      contactsName: '',
      phoneNum: '',
      money: '',
      typeShow: false,
      ts1Show: false,
      ts2Show: false,
      ts3Show: false,
      ts4Show: false,
      picked: '',
      accountNumber: '',
      submit: true,
      transaction: false,
      status: 0
    }
  },
  mounted() {
    this.$store.dispatch('getUserInfo').then(data => {
      if (data.data.httpCode === 200) {
        this.account = data.data.data.memberBusniess.account
      } else {
        console.log(data.data.msg)
      }
    }, err => {
      console.log(err)
    })
    this.id = this.$store.state.userInfo.id
    // this.account = this.$store.state.userInfo.memberBusniess.account
    // console.log(this.$store.state.userInfo)
    if (this.$route.query.id) {
      this.submit = false
      this.typeShow = true
    }
    if (this.$route.query.id) {
      this.getData()
    }
  },
  methods: {
    stepRouter(i, name) {
      if (i === 0 && this.status >= 1) {
        this.$router.push('/submit-apply?id=' + this.$route.query.id)
      }
      if (i === 1 && this.status >= 2) {
        this.$router.push('/confirm-aptitude?id=' + this.$route.query.id)
      }
      if (i === 2 && this.status >= 3) {
        this.$router.push('/contract-review?id=' + this.$route.query.id)
      }
      if (i === 3 && this.status >= 4) {
        this.$router.push('/transac-service-wait?id=' + this.$route.query.id)
      }
      if (i === 4 && this.status >= 5) {
        this.$router.push('/transactionsurveillance?id=' + this.$route.query.id)
      }
      if (i === 5 && this.status >= 6) {
        this.$router.push('/service-evalua?id=' + this.$route.query.id)
      }
    },
    onBindClick() {
      if (!this.otherBusiness) {
        this.$toasted.show('请输入交易相对方名称')
        return
      }
      if (!this.contractType) {
        this.$toasted.show('请选择合同类型')
        return
      }
      if (!this.money) {
        this.$toasted.show('请输入合同金额')
        return
      }
      var conReg = /^[\u4E00-\u9FA5A-Za-z]+$/
      if (!this.contactsName) {
        this.$toasted.show('请输入本次监控联系人')
        return
      }
      if (!conReg.test(this.contactsName)) {
        this.$toasted.show('监控联系人必须为中文或英文')
        return
      }
      if (!this.phoneNum) {
        this.$toasted.show('请输入手机号码')
        return
      }
      var phoneReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1})|(16[0-9]{1}))+\d{8})$/
      if (!phoneReg.test(this.phoneNum)) {
        this.$toasted.show('请输入有效地手机号码')
        return
      }
      if (this.picked === '1') {
        this.ts1Show = true
      }
      if (this.picked === '2' || this.picked === '3') {
        this.ts2Show = true
      }
    },
    onCancel() {
      this.$router.push('/personalcenter/transac')
    },
    onSubmit() {
      this.$http.post('/transactionMonitorSer/business/submitApplication', {
        monitorType: this.picked,
        businessId: this.id,
        otherBusiness: this.otherBusiness,
        contractType: this.contractType,
        contractPrice: 1000000 * (this.money * 1000) / 1000,
        contactsName: this.contactsName,
        contactsPhone: this.phoneNum
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.$router.push('/confirm-aptitude')
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络出错')
      })
    },
    onSubmission() {
      if (!this.accountNumber) {
        this.$toasted.show('对方账号不能为空')
      } else {
        this.$http.post('/transactionMonitorSer/business/submitApplication', {
          monitorType: this.picked,
          businessId: this.id,
          otherBusiness: this.otherBusiness,
          contractType: this.contractType,
          contractPrice: 1000000 * (this.money * 1000) / 1000,
          contactsName: this.contactsName,
          contactsPhone: this.phoneNum,
          otherBusinessIds: this.accountNumber
        }).then(data => {
          if (data.data.httpCode === 200) {
            this.$router.push('/confirm-aptitude')
          } else {
            this.$toasted.show(data.data.msg)
          }
        }).catch(err => {
          console.log(err)
          this.$toasted.show('网络出错')
        })
      }
    },
    getData() {
      this.$http.post('/transactionMonitorSer/business/read/detail', {
        id: this.$route.query.id
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.picked = data.data.data.monitorType
          this.otherBusiness = data.data.data.otherBusiness
          this.businessName = data.data.data.businessName
          this.contractType = data.data.data.contractType
          this.money = data.data.data.contractPrice / 1000000
          this.contactsName = data.data.data.contactsName
          this.phoneNum = data.data.data.contactsPhone
          this.otherId = data.data.data.businessId
          this.status = data.data.data.status
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络出错')
      })
    },
    refusal() {
      this.ts3Show = true
    },
    accept() {
      this.ts4Show = true
    },
    onRefuse() {
      this.$http.post('/transactionMonitorSer/business/tradingHalt', {
        id: this.$route.query.id
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.ts3Show = false
          this.$router.push('/personalcenter/transac')
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络错误')
      })
    },
    onConfirm() {
      this.$http.post('transactionMonitorSer/business/confirm', {
        id: this.$route.query.id
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.ts4Show = false
          this.$router.push('/personalcenter/transac')
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络错误')
      })
    },
    cancel() {
      this.picked = ''
      this.otherBusiness = ''
      this.contractType = ''
      this.money = ''
      this.contactsName = ''
      this.phoneNum = ''
    }
  }
}

</script>
<style type="text/css" scoped>
.box-border {
  border: 1px solid #ddd;
}

.tm-title {
  line-height: 40px;
  padding-left: 35px;
  font-size: 14px;
  color: #282828;
  border-bottom: 1px solid #ddd;
}

.content {
  padding-bottom: 30px;
}

.content .box {
  margin-top: 20px;
}

.box .white-button,
.box .blue-button {
  width: 245px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin: 40px 15px;
}

.content .box .box-border-top {
  border-top: 1px solid #ddd;
}

.content .box ul li.flo-left {
  border-right: 1px solid #dddddd;
  width: 396px;
}

.content .box ul li.flo-right {
  width: 800px;
  padding-left: 100px;
}

.monitor-num li.flo-left {
  line-height: 114px;
}

.monitor-num ul {
  padding: 15px 0;
}

.monitor-num ul li {
  line-height: 28px;
}

.monitor-box li.flo-left {
  line-height: 60px;
}

.monitor-box input.input-css {
  width: 400px;
  margin-top: 11px;
}

.monitor-box select {
  width: 200px;
  margin-top: 11px;
}

.monitor-box li span {
  margin-left: -26px;
}

.monitor-contact li.flo-left {
  line-height: 115px;
}

.icon-asterisk {
  color: #ec5303;
  font-size: 28px;
  position: relative;
  left: -30px;
  top: 6px;
}

p.title {
  height: 40px;
  line-height: 40px;
}

.vodal-main .con {
  padding: 43px 20px;
  border: 1px solid #ddd;
  line-height: 35px;
}

.vodal-main-s .con {
  padding: 22px 20px;
}

</style>
